<template>
  <div class="cardContainer" @click="toDetail">
    <img :src="getUrl(coverimage)" :title="goodsname" />
    <div class="name">{{ goodsname }}</div>
    <div class="price">
      <span class="cur">特价：￥{{ curprice }}</span>
      <span class="pre">{{ preprice }}￥</span>
    </div>
  </div>
</template>

<script>
import { baseURL } from "@/http";
export default {
  props: {
    goodsname: String,
    coverimage: String,
    curprice: Number,
    preprice: Number,
    gid: Number,
  },
  methods: {
    toDetail() {
      this.$router.push({
        path: "/detail",
        query: {
          gid: this.$props.gid,
        },
      });
    },
    getUrl(url) {
      if (url && url.indexOf("http") > -1) return url;
      return baseURL + url;
    },
  },
};
</script>

<style lang="less" scoped>
.cardContainer {
  display: flex;
  flex-direction: column;
  align-content: center;
  justify-content: center;
  width: 250px;
  .name {
    margin-top: 5px;
    /* Safari, Opera, and Chrome */
    white-space: normal; /*默认*/
    -webkit-line-clamp: 2; /*控制行数*/
    text-overflow: ellipsis; /*打点*/
    display: -webkit-box;
    overflow: hidden; /*隐藏打点*/
    -webkit-box-orient: vertical; /*垂直排列*/
  }
  .price {
    margin-top: 5px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    .cur {
      color: #ff4400;
      font-weight: 550;
    }
    .pre {
      color: #666;
      font-size: 12px;
      text-decoration: line-through;
    }
  }
}
.cardContainer:hover {
  cursor: pointer;
}
</style>